<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content="noodp"><meta http-equiv=x-ua-compatible content="IE=edge, chrome=1"><title>Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章 - Yulin Lewis' Blog</title><meta name=keywords content="雨临Lewis,Java,hugo,hexo,博客"><meta name=Description content="不想当写手的码农不是好咸鱼_(xз」∠)_"><meta property="og:title" content="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章"><meta property="og:description" content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta property="og:type" content="article"><meta property="og:url" content="https://lewky.cn/posts/hugo-3.html/"><meta property="og:image" content="https://lewky.cn/logo.png"><meta property="article:published_time" content="2020-10-11T13:11:16+08:00"><meta property="article:modified_time" content="2021-11-29T13:11:16+08:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lewky.cn/logo.png"><meta name=twitter:title content="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章"><meta name=twitter:description content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta name=application-name content="雨临Lewis的博客"><meta name=apple-mobile-web-app-title content="雨临Lewis的博客"><meta name=theme-color content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=manifest href=/site.webmanifest><link rel=canonical href=https://lewky.cn/posts/hugo-3.html/><link rel=prev href=https://lewky.cn/posts/hugo-2.html/><link rel=next href=https://lewky.cn/posts/hugo-4.html/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css><link rel=stylesheet href=/css/style.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css><script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章","inLanguage":"","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lewky.cn\/posts\/hugo-3.html\/"},"genre":"posts","keywords":"Hugo, LoveIt主题, 主题美化, 功能增强","wordcount":7547,"url":"https:\/\/lewky.cn\/posts\/hugo-3.html\/","datePublished":"2020-10-11T13:11:16+08:00","dateModified":"2021-11-29T13:11:16+08:00","license":"This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher":{"@type":"Organization","name":"雨临Lewis","logo":"https:\/\/lewky.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"雨临Lewis"},"description":""}</script></head><body header-desktop=fixed header-mobile=auto><script type=text/javascript>(window.localStorage&&localStorage.getItem('theme')?localStorage.getItem('theme')==='dark':('auto'==='auto'?window.matchMedia('(prefers-color-scheme: dark)').matches:'auto'==='dark'))&&document.body.setAttribute('theme','dark');</script><div id=mask></div><div class=wrapper><header class=desktop id=header-desktop><div class=header-wrapper><a href=https://github.com/lewky class=github-corner target=_blank title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70b7fd;color:#fff;position:absolute;top:0;border:0;left:0;transform:scale(-1,1)" aria-hidden="true"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentcolor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentcolor" class="octo-body"/></svg></a><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu><div class=menu-inner><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索
</a><span class="menu-item delimiter"></span><a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></div></header><header class=mobile id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu-toggle id=menu-toggle-mobile><span></span><span></span><span></span></div></div><div class=menu id=menu-mobile><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索</a>
<a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></header><div class="search-dropdown desktop"><div id=search-dropdown-desktop></div></div><div class="search-dropdown mobile"><div id=search-dropdown-mobile></div></div><main class=main><div class=container><div class=toc id=toc-auto><h2 class=toc-title>目录</h2><div class=toc-content id=toc-content-auto></div></div><article class="page single"><h1 class="single-title animated flipInX">Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章</h1><div class=post-meta><div class=post-meta-line><span class=post-author><a href=/ title=Author rel=author class=author><i class="fas fa-user-circle fa-fw"></i>雨临Lewis</a></span>&nbsp;<span class=post-category>收录于 <a href=/categories/hugo%E7%B3%BB%E5%88%97/><i class="far fa-folder fa-fw"></i>Hugo系列</a></span></div><div class=post-meta-line><i class="far fa-calendar fa-fw"></i>&nbsp;<time datetime=2020-10-11>2020-10-11</time>&nbsp;<i class="far fa-calendar-plus fa-fw"></i>&nbsp;<time datetime=2021-11-29>2021-11-29</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 7547 字
<i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 16 分钟&nbsp;<span id=/posts/hugo-3.html/ class=leancloud_visitors data-flag-title="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章">
<i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;次阅读
</span>&nbsp;
<a href=#comments id=post-meta-vcount title=查看评论><i class="fas fa-comment fa-fw"></i>&nbsp;<span id=/posts/hugo-3.html/ class=waline-comment-count></span>&nbsp;条评论</a></div></div><div class="details toc" id=toc-static kept><div class="details-summary toc-title"><span>目录</span>
<span><i class="details-icon fas fa-angle-right"></i></span></div><div class="details-content toc-content" id=toc-content-static><nav id=TableOfContents><ol><li><a href=#前言>前言</a></li><li><a href=#添加自定义的_customscss>添加自定义的<code>_custom.scss</code></a><ol><li><a href=#注意>注意！！！</a></li></ol></li><li><a href=#添加自定义的customjs>添加自定义的<code>custom.js</code></a></li><li><a href=#添加全局cdn变量>添加全局cdn变量</a><ol><li><a href=#在md文件中使用>在md文件中使用</a></li><li><a href=#在模板文件中使用>在模板文件中使用</a></li><li><a href=#在javascript文件中使用>在JavaScript文件中使用</a></li></ol></li><li><a href=#主题自带的admonition样式>主题自带的admonition样式</a></li><li><a href=#自定义404页面>自定义404页面</a></li><li><a href=#添加背景图片轮播>添加背景图片轮播</a></li><li><a href=#添加搜索功能>添加搜索功能</a><ol><li><a href=#安装搜索插件hugo-search-fuse-js到本地>安装搜索插件hugo-search-fuse-js到本地</a></li><li><a href=#修改页面模板文件baseofhtml>修改页面模板文件baseof.html</a></li><li><a href=#添加搜索按钮>添加搜索按钮</a></li><li><a href=#关闭loveit主题默认的搜索插件>关闭LoveIt主题默认的搜索插件</a></li><li><a href=#修改搜索页面的样式>修改搜索页面的样式</a></li><li><a href=#优化中文搜索效果>优化中文搜索效果</a></li></ol></li><li><a href=#如何添加自定义的页面>如何添加自定义的页面</a></li><li><a href=#添加友链页面>添加友链页面</a><ol><li><a href=#新建page页面>新建Page页面</a></li><li><a href=#添加friendhtml>添加<code>friend.html</code></a></li><li><a href=#添加样式文件并引入>添加样式文件并引入</a></li><li><a href=#另一种添加样式文件并引入的方案>另一种添加样式文件并引入的方案</a></li><li><a href=#在菜单栏里新增一个友链按钮>在菜单栏里新增一个友链按钮</a></li><li><a href=#使用示例和效果展示>使用示例和效果展示</a></li></ol></li><li><a href=#参考链接>参考链接</a></li></ol></nav></div></div><div class=content id=content><h2 id=前言>前言</h2><p>本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10
</code></pre></td></tr></table></div></div><p><strong>请注意，本文的所有功能都离不开两个新增加的文件：<code>_custom.scss</code>和<code>custom.js</code>，部分功能还需要<code>jquery</code>，在第一章中会提及如何引入。</strong></p><p>另外本文篇幅太长，阅读体验不好，将其进行分章如下：</p><ul><li><a href=/posts/hugo-3.html/ rel>Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章</a></li><li><a href=/posts/hugo-3.1.html/ rel>Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章</a></li><li><a href=/posts/hugo-3.2.html/ rel>Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章</a></li><li><a href=/posts/hugo-3-3/ rel>Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章</a></li></ul><h2 id=添加自定义的_customscss>添加自定义的<code>_custom.scss</code></h2><p>LoveIt主题提供了一个自定义的<code>_custom.scss</code>，可以在该文件里添加自定义的css样式。该文件目录位于<code>\themes\LoveIt\assets\css\_custom.scss</code>，不建议直接在该文件里写css代码。</p><p>Hugo在渲染页面时优先读取站点根目录下的同名字的目录和文件，所以可以利用这个特点来美化主题。<strong>只需要把想修改的主题模板文件拷贝到根目录下同样的目录中并进行修改，这样就可以在不改动原本的主题文件的情况下实现主题美化。</strong></p><p>首先在站点根目录下创建一个自定义的文件：<code>\assets\css\_custom.scss</code>，这样Hugo就会最终以该文件来渲染页面的样式。</p><p>这是我个人站点的<a href=https://lewky.cn/css/_custom.scss target=_blank rel="noopener noreffer">_custom.scss文件</a>，有兴趣的可以看看。</p><h3 id=注意>注意！！！</h3><p>这里有个很关键的点，只有使用的是扩展版本的Hugo，才能令<code>_custom.scss</code>文件生效！！！因为原生的Hugo并不支持编译sass文件，必须使用扩展版本的Hugo才行。</p><p>所以请查看你所使用的Hugo版本，如果不是<code>hugo_extended</code>版本，请前往<a href=https://github.com/gohugoio/hugo/releases target=_blank rel="noopener noreffer">Hugo Release页面</a>下载你当前版本Hugo所对应的<code>hugo_extended</code>版本。</p><p>比如我原本使用的是<code>hugo_0.74.0_Windows-64bit.zip</code>，就需要改为使用<code>hugo_extended_0.74.0_Windows-64bit.zip</code>。</p><p>此外，本文会涉及多个文件的修改，包括hmtl、js、scss等文件类型，且由于<strong>引入了中文字符</strong>，可能导致页面<strong>显示乱码</strong>，这是因为文件的编码使用的是<code>ANSI</code>，<strong>需要改为<code>UTF-8</code>的编码</strong>。</p><h2 id=添加自定义的customjs>添加自定义的<code>custom.js</code></h2><p>LoveIt主题并没有提供一个文件来让我们自定义JavaScript，所以需要自己创建一个js文件来自定义JavaScript。</p><p>首先在站点根目录下创建一个自定义的JavaScript文件：<code>\static\js\custom.js</code>。这个文件需要在body的闭合标签之前引入，并且要在<code>theme.min.js</code>的引入顺序之后。这样可以防止样式被其他文件覆盖，并且不会因为JavaScript文件假装太久导致页面长时间的空白。</p><p>对于LoveIt主题，<code>custom.js</code>添加在<code>\themes\LoveIt\layouts\partials\assets.html</code>里。</p><p>首先把该文件拷贝到根目录下的<code>\layouts\partials\assets.html</code>，然后打开拷贝后的文件，把自定义的JavaScript文件添加到最末尾的<code>{{- partial "plugin/analytics.html" . -}}</code>的上一行：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html>{{- /* 自定义的js文件 */ -}}
<span class=p>&lt;</span><span class=nt>script</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;text/javascript&#34;</span> <span class=na>src</span><span class=o>=</span><span class=s>&#34;/js/custom.js&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>由于本文提及的部分功能会用到jQuery，建议一起引入，最终如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js&#34;&gt;&lt;/script&gt;

{{- /* 自定义的js文件 */ -}}
&lt;script type=&#34;text/javascript&#34; src=&#34;/js/custom.js&#34;&gt;&lt;/script&gt;
</code></pre></td></tr></table></div></div><p>如果有其他的JavaScript文件要引入，加在一样的地方就行，但是要放在自定义的<code>custom.js</code>之前。这是我的<a href=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/custom.js target=_blank rel="noopener noreffer">custom.js文件</a>，有兴趣的可以看看。</p><h2 id=添加全局cdn变量>添加全局cdn变量</h2><p>对于一些静态资源，比如图片、音乐文件、第三方库等，如果有自己的cdn或者图床等，可以在站点配置文件自定义一个cdn变量，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>[params]
  # cdn变量，末尾不需要加/
  cdnPrefix = &#34;http://xxxx&#34;
</code></pre></td></tr></table></div></div><p>接下来就可以在你需要的地方使用该变量，大概有如下3种用法。</p><h3 id=在md文件中使用>在md文件中使用</h3><p>在md文件中可以用内置的shortcodes来使用该变量：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{&lt; param cdnPrefix &gt;}}

![avatar.jpg]({{&lt; param cdnPrefix &gt;}}/images/avatar.jpg)
</code></pre></td></tr></table></div></div><h3 id=在模板文件中使用>在模板文件中使用</h3><p>在<code>layouts</code>目录下有很多html文件，这些是用来渲染站点的模板文件，可以用Hugo的语法来引入该变量：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{ .Site.Params.cdnPrefix }}
</code></pre></td></tr></table></div></div><p>如果在一个模板文件里有多个地方使用到该变量，可以定义一个局部变量来使用：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- $cdn := .Site.Params.cdnPrefix -}}

/* 使用局部变量 */
{{ $cdn }}
</code></pre></td></tr></table></div></div><h3 id=在javascript文件中使用>在JavaScript文件中使用</h3><p>由于JavaScript文件中不能使用上述的shortcodes或Hugo语法来引用变量，只能通过在<code>\layouts\partials\assets.html</code>中用JavaScript语法来引入该变量，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>/* 这是可以应用于JavaScript文件的全局变量 */
&lt;script&gt;
	/* cdn for some static resources */
	var $cdnPrefix = {{ .Site.Params.cdnPrefix }};
&lt;/script&gt;
</code></pre></td></tr></table></div></div><p>这样就可以在其他被引入的JavaScript文件中使用这个<code>$cdnPrefix</code>变量：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-javascript data-lang=javascript><span class=nx>$</span><span class=p>(</span><span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
	<span class=nx>$</span><span class=p>.</span><span class=nx>backstretch</span><span class=p>([</span>
		  <span class=nx>$cdnPrefix</span> <span class=o>+</span> <span class=s2>&#34;/images/background/saber1.jpg&#34;</span>
	<span class=p>],</span> <span class=p>{</span> <span class=nx>duration</span><span class=o>:</span> <span class=mi>60000</span><span class=p>,</span> <span class=nx>fade</span><span class=o>:</span> <span class=mi>1500</span> <span class=p>});</span>
<span class=p>});</span>
</code></pre></td></tr></table></div></div><p>如果是想在模板文件里引入某个自定义的JavaScript文件，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-javascript data-lang=javascript><span class=p>{{</span><span class=o>-</span> <span class=cm>/* 自定义的js文件 */</span> <span class=o>-</span><span class=p>}}</span>
<span class=o>&lt;</span><span class=nx>script</span> <span class=nx>type</span><span class=o>=</span><span class=s2>&#34;text/javascript&#34;</span> <span class=nx>src</span><span class=o>=</span><span class=s2>&#34;{{ .Site.Params.cdnPrefix }}/js/custom.js&#34;</span><span class=o>&gt;&lt;</span><span class=err>/script&gt;</span>
</code></pre></td></tr></table></div></div><h2 id=主题自带的admonition样式>主题自带的admonition样式</h2><p>LoveIt提供了<code>admonition</code> shortcode，支持 <strong>12</strong> 种样式，可以在页面中插入提示的横幅。代码如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span><span class=lnt>45
</span><span class=lnt>46
</span><span class=lnt>47
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{&lt; admonition &gt;}}
一个 **注意** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition abstract &gt;}}
一个 **摘要** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition info &gt;}}
一个 **信息** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition tip &gt;}}
一个 **技巧** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition success &gt;}}
一个 **成功** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition question &gt;}}
一个 **问题** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition warning &gt;}}
一个 **警告** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition failure &gt;}}
一个 **失败** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition danger &gt;}}
一个 **危险** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition bug &gt;}}
一个 **Bug** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition example &gt;}}
一个 **示例** 横幅
{{&lt; /admonition &gt;}}

{{&lt; admonition quote &gt;}}
一个 **引用** 横幅
{{&lt; /admonition &gt;}}
</code></pre></td></tr></table></div></div><p>效果如下：<div class="details admonition note open"><div class="details-summary admonition-title"><i class="icon fas fa-pencil-alt fa-fw"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>注意</strong> 横幅</div></div></div></p><div class="details admonition abstract open"><div class="details-summary admonition-title"><i class="icon fas fa-list-ul fa-fw"></i>摘要<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>摘要</strong> 横幅</div></div></div><div class="details admonition info open"><div class="details-summary admonition-title"><i class="icon fas fa-info-circle fa-fw"></i>信息<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>信息</strong> 横幅</div></div></div><div class="details admonition tip open"><div class="details-summary admonition-title"><i class="icon fas fa-lightbulb fa-fw"></i>技巧<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>技巧</strong> 横幅</div></div></div><div class="details admonition success open"><div class="details-summary admonition-title"><i class="icon fas fa-check-circle fa-fw"></i>成功<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>成功</strong> 横幅</div></div></div><div class="details admonition question open"><div class="details-summary admonition-title"><i class="icon fas fa-question-circle fa-fw"></i>问题<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>问题</strong> 横幅</div></div></div><div class="details admonition warning open"><div class="details-summary admonition-title"><i class="icon fas fa-exclamation-triangle fa-fw"></i>警告<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>警告</strong> 横幅</div></div></div><div class="details admonition failure open"><div class="details-summary admonition-title"><i class="icon fas fa-times-circle fa-fw"></i>失败<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>失败</strong> 横幅</div></div></div><div class="details admonition danger open"><div class="details-summary admonition-title"><i class="icon fas fa-skull-crossbones fa-fw"></i>危险<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>危险</strong> 横幅</div></div></div><div class="details admonition bug open"><div class="details-summary admonition-title"><i class="icon fas fa-bug fa-fw"></i>Bug<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>Bug</strong> 横幅</div></div></div><div class="details admonition example open"><div class="details-summary admonition-title"><i class="icon fas fa-list-ol fa-fw"></i>示例<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>示例</strong> 横幅</div></div></div><div class="details admonition quote open"><div class="details-summary admonition-title"><i class="icon fas fa-quote-right fa-fw"></i>引用<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>一个 <strong>引用</strong> 横幅</div></div></div><h2 id=自定义404页面>自定义404页面</h2><p>主题默认的404页面太普通，可以通过新增<code>\layouts\404.html</code>来自定义自己想要的404页面。这是本站的<a href=https://lewky.cn/404.html target=_blank rel="noopener noreffer">404页面</a>，有兴趣的可以看看<a href=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/404.html target=_blank rel="noopener noreffer">源码页面</a>。</p><h2 id=添加背景图片轮播>添加背景图片轮播</h2><p>这个功能需要引入图片轮播插件<code>jquery-backstretch</code>的cdn，并且该插件依赖于jQuery，需要在引入该插件之前引入jQuery。</p><p>打开<code>\layouts\partials\assets.html</code>，在你引入的<code>custom.js</code>的上面一行添加如下代码（必须要在custom.js之前引入这两个文件才有效果）：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>script</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;text/javascript&#34;</span> <span class=na>src</span><span class=o>=</span><span class=s>&#34;https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>script</span> <span class=na>type</span><span class=o>=</span><span class=s>&#34;text/javascript&#34;</span> <span class=na>src</span><span class=o>=</span><span class=s>&#34;https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>然后在<code>custom.js</code>里添加如下代码，具体想要轮播哪些图片可以自行修改，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-javascript data-lang=javascript><span class=cm>/* 轮播背景图片 */</span>
<span class=nx>$</span><span class=p>(</span><span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
	<span class=nx>$</span><span class=p>.</span><span class=nx>backstretch</span><span class=p>([</span>
		  <span class=s2>&#34;/images/background/saber1.jpg&#34;</span><span class=p>,</span>
		  <span class=s2>&#34;/images/background/saber2.jpg&#34;</span><span class=p>,</span>
		  <span class=s2>&#34;/images/background/wlop.jpg&#34;</span>
	<span class=p>],</span> <span class=p>{</span> <span class=nx>duration</span><span class=o>:</span> <span class=mi>60000</span><span class=p>,</span> <span class=nx>fade</span><span class=o>:</span> <span class=mi>1500</span> <span class=p>});</span>
<span class=p>});</span>
</code></pre></td></tr></table></div></div><h2 id=添加搜索功能>添加搜索功能</h2><p><code>LoveIt</code>主题自带的搜索插件是<code>lunr</code>和<code>algolia</code>，这两个的使用都比较麻烦，后者甚至还想要去注册账号，虽然可以免费使用搜索服务，但是抓取收录时间好像是一小时一次，并且还有每月使用量的限制，太不便利了。</p><p>之前在Hexo那边用的是自带的搜索插件，是每次部署时自动为所有文章生成索引到一个文件里，然后直接搜索该文件来实现本地搜索功能。这个还是比较方便个人站点使用的，于是在网上找到了类似的一个Hugo专用的搜索插件<a href=https://github.com/kaushalmodi/hugo-search-fuse-js target=_blank rel="noopener noreffer">hugo-search-fuse-js</a>。</p><h3 id=安装搜索插件hugo-search-fuse-js到本地>安装搜索插件hugo-search-fuse-js到本地</h3><p><code>hugo-search-fuse-js</code>并不是一个单独的主题，而是Hugo主题的一个组件：</p><ol><li>下载<a href=https://github.com/kaushalmodi/hugo-search-fuse-js target=_blank rel="noopener noreffer">hugo-search-fuse-js</a>到站点的主题目录<code>/themes/hugo-search-fuse-js</code>下，<strong>注意，目录名必须是<code>hugo-search-fuse-js</code></strong></li><li>把该主题组件名字添加到站点配置文件里，<strong>注意，搜索组件名字要在最前面，后面跟着的是你的主题的文件夹名字</strong>：</li></ol><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>theme = [&#34;hugo-search-fuse-js&#34;, &#34;my-theme&#34;]
</code></pre></td></tr></table></div></div><ol start=3><li>新建一个<code>content/search.md</code>文件，内容如下：</li></ol><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>+++
title = &#34;Search&#34;
layout = &#34;search&#34;
outputs = [&#34;html&#34;, &#34;json&#34;]
[sitemap]
  priority = 0.1
+++
</code></pre></td></tr></table></div></div><h3 id=修改页面模板文件baseofhtml>修改页面模板文件baseof.html</h3><ol><li>把主题目录下的<code>\themes\LoveIt\layouts\_default\baseof.html</code>拷贝到站点根目录下的<code>\layouts\_default\baseof.html</code></li><li>在拷贝后的<code>baseof.html</code>的适当位置插入两段代码：<code>{{ block "main" . }}{{ end }}</code>和<code>{{ block "footer" . }}{{ end }}</code>，下面是一个修改后的样例：</li></ol><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;wrapper&#34;</span><span class=p>&gt;</span>
    {{- partial &#34;header.html&#34; . -}}
    <span class=p>&lt;</span><span class=nt>main</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;main&#34;</span><span class=p>&gt;</span>
        <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;container&#34;</span><span class=p>&gt;</span>
			{{ block &#34;main&#34; . }}{{ end }}
            {{- block &#34;content&#34; . }}{{ end -}}
        <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
    <span class=p>&lt;/</span><span class=nt>main</span><span class=p>&gt;</span>
    {{- partial &#34;footer.html&#34; . -}}
	{{ block &#34;footer&#34; . }}{{ end }}
<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><h3 id=添加搜索按钮>添加搜索按钮</h3><p>在站点配置文件里添加一个新的按钮给搜索功能使用，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>[menu]
  [[menu.main]]
    pre = &#34;&lt;i class=&#39;fas fa-fw fa-search&#39;&gt;&lt;/i&gt;&#34;
    name = &#34;搜索&#34;
    weight = 7
    identifier = &#34;search&#34;
    url = &#34;/search/&#34;
</code></pre></td></tr></table></div></div><p>如果你的配置文件里的菜单属性是多语言的，样例如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span><span class=lnt>9
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>[languages]
  [languages.en]
    [languages.en.menu]
      [[languages.en.menu.main]]
	    pre = &#34;&lt;i class=&#39;fas fa-fw fa-search&#39;&gt;&lt;/i&gt;&#34;
	    name = &#34;Search&#34;
	    weight = 7
	    identifier = &#34;search&#34;
	    url = &#34;/search/&#34;
</code></pre></td></tr></table></div></div><h3 id=关闭loveit主题默认的搜索插件>关闭LoveIt主题默认的搜索插件</h3><p>在站点配置文件里把默认的搜索插件关闭，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>[params]
  [params.app]
    [params.search]
      enable = false
</code></pre></td></tr></table></div></div><p>如果你使用的是多语言的配置，则应该把每个语言的搜索插件都关闭，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>[languages]
  [languages.en]
    [languages.en.params]
      [languages.en.params.search]
        enable = false

  [languages.zh-cn]
    [languages.zh-cn.params]
      [languages.zh-cn.params.search]
        enable = false
</code></pre></td></tr></table></div></div><h3 id=修改搜索页面的样式>修改搜索页面的样式</h3><p>如果对该插件生成的搜索页面样式不满意，可以自行修改，下面是我的样式代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span><span class=lnt>45
</span><span class=lnt>46
</span><span class=lnt>47
</span><span class=lnt>48
</span><span class=lnt>49
</span><span class=lnt>50
</span><span class=lnt>51
</span><span class=lnt>52
</span><span class=lnt>53
</span><span class=lnt>54
</span><span class=lnt>55
</span><span class=lnt>56
</span><span class=lnt>57
</span><span class=lnt>58
</span><span class=lnt>59
</span><span class=lnt>60
</span><span class=lnt>61
</span><span class=lnt>62
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=c>/* 搜索页面 */</span>
<span class=p>.</span><span class=nc>search</span> <span class=p>{</span>
    <span class=k>position</span><span class=p>:</span> <span class=kc>relative</span><span class=p>;</span>
    <span class=k>padding-top</span><span class=p>:</span> <span class=mf>3.5</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>padding-bottom</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>width</span><span class=p>:</span> <span class=mf>57.5</span><span class=kt>%</span><span class=p>;</span>
    <span class=k>margin</span><span class=p>:</span> <span class=mi>0</span> <span class=kc>auto</span><span class=p>;</span>
    <span class=k>background</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
    <span class=k>opacity</span><span class=p>:</span> <span class=mf>.95</span><span class=p>;</span>
<span class=p>}</span>
<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=p>.</span><span class=nc>search</span> <span class=p>{</span>
    <span class=k>background</span><span class=p>:</span> <span class=mh>#3a3535</span><span class=p>;</span>
<span class=p>}</span>

<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=p>.</span><span class=nc>search</span> <span class=nt>header</span><span class=o>,</span>
<span class=p>.</span><span class=nc>search</span> <span class=nt>header</span> <span class=p>{</span>
    <span class=k>background-color</span><span class=p>:</span> <span class=mh>#f8f8f8</span><span class=p>;</span>
<span class=p>}</span>

<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=p>.</span><span class=nc>search</span> <span class=nt>header</span><span class=p>:</span><span class=nd>hover</span><span class=o>,</span>
<span class=p>.</span><span class=nc>search</span> <span class=nt>header</span><span class=p>:</span><span class=nd>hover</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>box-shadow</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
    <span class=k>box-shadow</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>search</span> <span class=nt>header</span> <span class=nt>h1</span> <span class=p>{</span>
    <span class=k>padding-left</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>background</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
<span class=p>}</span>
<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=p>.</span><span class=nc>search</span> <span class=nt>header</span> <span class=nt>h1</span> <span class=p>{</span>
    <span class=k>background</span><span class=p>:</span> <span class=mh>#3a3535</span><span class=p>;</span>
<span class=p>}</span>

<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=p>.</span><span class=nc>search</span> <span class=nt>input</span><span class=o>,</span>
<span class=p>.</span><span class=nc>search</span> <span class=nt>input</span> <span class=p>{</span>
	<span class=k>height</span><span class=p>:</span> <span class=kc>initial</span><span class=p>;</span>
    <span class=k>width</span><span class=p>:</span> <span class=kc>initial</span><span class=p>;</span>
    <span class=k>color</span><span class=p>:</span> <span class=kc>initial</span><span class=p>;</span>
	<span class=k>background-color</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
	<span class=k>margin</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
	<span class=k>border-width</span><span class=p>:</span> <span class=mi>2</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>border-style</span><span class=p>:</span> <span class=kc>inset</span><span class=p>;</span>
    <span class=k>border-color</span><span class=p>:</span> <span class=kc>initial</span><span class=p>;</span>
    <span class=k>border-image</span><span class=p>:</span> <span class=kc>initial</span><span class=p>;</span>
	<span class=kp>-webkit-</span><span class=k>border-radius</span><span class=p>:</span> <span class=mi>0</span><span class=p>;</span>
    <span class=kp>-moz-</span><span class=k>border-radius</span><span class=p>:</span> <span class=mi>0</span><span class=p>;</span>
    <span class=k>border-radius</span><span class=p>:</span> <span class=mi>0</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>search</span> <span class=p>#</span><span class=nn>search-results</span> <span class=p>{</span>
    <span class=k>padding-left</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>padding-right</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
<span class=p>}</span>

<span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=nt>a</span><span class=p>:</span><span class=nd>active</span><span class=o>,</span> <span class=o>[</span><span class=nt>theme</span><span class=o>=</span><span class=nt>dark</span><span class=o>]</span> <span class=nt>a</span><span class=p>:</span><span class=nd>hover</span> <span class=p>{</span>
    <span class=k>color</span><span class=p>:</span> <span class=mh>#2d96bd</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>search</span> <span class=nt>hr</span> <span class=p>{</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>margin-right</span><span class=p>:</span> <span class=mi>1</span><span class=kt>rem</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><h3 id=优化中文搜索效果>优化中文搜索效果</h3><p>这个搜索功能借助了Fuse.js模糊搜索引擎，为了更好的适配中文搜索结果，需要修改模糊搜索的相关参数，相对的会导致英文搜索结果变多，不过这个可以接受。因为搜索结果变多了，总好过搜索不出来想要的中文结果。而且可以通过设置搜索结果的权重来改变结果的排序，这样越前面的搜索结果就越是我们想要的。</p><p>打开<code>\themes\hugo-search-fuse-js\static\js\search.js</code>，这里面配置了fuse.js的搜索配置选项，可以参考下我的配置，我已经添加了部分中文注释：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>// Options for fuse.js
let fuseOptions = {
  shouldSort: true, // 是否按分数对结果列表排序
  includeMatches: true, //  是否应将分数包含在结果集中。0分表示完全匹配，1分表示完全不匹配。
  tokenize: true,
  matchAllTokens: true,
  threshold: 0.2, // 匹配算法阈值。阈值为0.0需要完全匹配（字母和位置），阈值为1.0将匹配任何内容。
  location: 0, // 确定文本中预期找到的模式的大致位置。
  /**
   * 确定匹配与模糊位置（由位置指定）的距离。一个精确的字母匹配，即距离模糊位置很远的字符将被视为完全不匹配。
   *  距离为0要求匹配位于指定的准确位置，距离为100则要求完全匹配位于使用阈值0.2找到的位置的20个字符以内。
   */
  distance: 100,
  maxPatternLength: 64, // 模式的最大长度
  minMatchCharLength: 2, // 模式的最小字符长度
  keys: [
    {name:&#34;title&#34;,weight:0.8},
    {name:&#34;tags&#34;,weight:0.5},
    {name:&#34;categories&#34;,weight:0.5},
    {name:&#34;contents&#34;,weight:0.4}
  ]
};
</code></pre></td></tr></table></div></div><p>这里和中文搜索有关的主要就3个选项：<code>threshold</code>，<code>location</code>，<code>distance</code>。</p><p><code>threshold</code>是阈值，这个参数搭配<code>distance</code>使用。如果阈值填了<code>0.0</code>，相当于<code>distance</code>没有意义。<code>location</code>填0就行，<code>distance</code>填100就足够了，太大了会导致搜索到过多的结果。上面根据我个人的中文搜索测试结果，选择了这样的配置：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>  threshold: 0.2,
  location: 0,
  distance: 100
</code></pre></td></tr></table></div></div><p>可以根据个人情况来修改这几个参数的值，另外我还将<code>minMatchCharLength</code>的值改成了2，不过经过测试，和之前默认的<code>3</code>并没有什么差别。</p><h2 id=如何添加自定义的页面>如何添加自定义的页面</h2><p>除了发布草稿和正文，我们还可以添加自定义的页面page。page不会像文章那样被渲染，而是被渲染成一个单独的页面，类似于你的文档、标签页面。</p><p>方法很简单：</p><ol><li>在站点根目录的<code>/content/</code>目录下，新建一个文件夹，比如<code>about</code>文件夹。然后在该文件夹里新建一个<code>index.md</code>文件，该文件将作为站点访问该目录的页面，你可以将其当成一篇特殊的文章。</li><li>在<code>index.md</code>文件里加上下面的内容，实际上这里只需要<code>title</code>就够了，<code>date</code>这个日期属性可要可不要，因为page页面是看不到这个日期的：<div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html>---
title: &#34;关于&#34;
date: 2018-04-24T22:01:44+08:00
---
</code></pre></td></tr></table></div></div><p>``</p></li><li>接下来你就可以像写普通文章一样，在这个<code>index.md</code>文件里随便写你想要展示的内容就行了。</li></ol><h2 id=添加友链页面>添加友链页面</h2><h3 id=新建page页面>新建Page页面</h3><p>首先在站点根目录的<code>/content/</code>目录下，新建一个<code>friends</code>文件夹。在该文件夹里新建一个<code>index.md</code>文件，内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>---
title: &#34;友链墙&#34;
---
</code></pre></td></tr></table></div></div><p>由于博主想要将友链分类，并能使用上目录，所以不使用这种page形式的友链页面，而是直接创建一篇文章作为友链使用，文件头如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>title: &#34;友链墙&#34;
url: friends
hiddenFromHomePage: true
</code></pre></td></tr></table></div></div><h3 id=添加friendhtml>添加<code>friend.html</code></h3><p>我们通过自定义一个<code>shortcode</code>来实现该功能，以后就可以方便地通过这个<code>shortcode</code>快速新增友链到页面上。</p><p>在站点根目录下新增一个文件：<code>/layouts/shortcodes/friend.html</code>，其内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html>{{ if .IsNamedParams }}
{{ $defaultImg := &#34;https://sdn.geekzu.org/avatar/d41d8cd98f00b204e9800998ecf8427e?d=retro&#34; }}
	<span class=p>&lt;</span><span class=nt>a</span> <span class=na>target</span><span class=o>=</span><span class=s>&#34;_blank&#34;</span> <span class=na>href</span><span class=o>=</span><span class=s>{{</span> <span class=err>.</span><span class=na>Get</span> <span class=err>&#34;</span><span class=na>url</span><span class=err>&#34;</span> <span class=err>}}</span> <span class=na>title</span><span class=o>=</span><span class=s>{{</span> <span class=err>.</span><span class=na>Get</span> <span class=err>&#34;</span><span class=na>name</span><span class=err>&#34;</span> <span class=err>}}</span><span class=na>---</span><span class=err>{{</span> <span class=err>.</span><span class=na>Get</span> <span class=err>&#34;</span><span class=na>word</span><span class=err>&#34;</span> <span class=err>}}</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend url&#34;</span><span class=p>&gt;</span>
	  <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend block whole {{ .Get &#34;</span><span class=na>primary-color</span><span class=err>&#34;</span> <span class=err>|</span> <span class=na>default</span> <span class=err>&#34;</span><span class=na>default</span><span class=err>&#34;}}</span> <span class=err>{{</span> <span class=err>.</span><span class=na>Get</span> <span class=err>&#34;</span><span class=na>border-animation</span><span class=err>&#34;</span> <span class=err>|</span> <span class=na>default</span> <span class=err>&#34;</span><span class=na>shadow</span><span class=err>&#34;}}&#34;</span><span class=p>&gt;</span>
		<span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend block left&#34;</span><span class=p>&gt;</span>
		  <span class=p>&lt;</span><span class=nt>img</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend logo {{ .Get &#34;</span><span class=na>img-animation</span><span class=err>&#34;</span> <span class=err>|</span> <span class=na>default</span> <span class=err>&#34;</span><span class=na>rotate</span><span class=err>&#34;}}&#34;</span> <span class=na>src</span><span class=o>=</span><span class=s>{{</span> <span class=err>.</span><span class=na>Get</span> <span class=err>&#34;</span><span class=na>logo</span><span class=err>&#34;</span> <span class=err>}}</span> <span class=na>onerror</span><span class=o>=</span><span class=s>&#34;this.src=&#39;{{ $defaultImg }}&#39;&#34;</span> <span class=p>/&gt;</span>
		<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
		<span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend block right&#34;</span><span class=p>&gt;</span>
		  <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend name&#34;</span><span class=p>&gt;</span>{{ .Get &#34;name&#34; }}<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
		  <span class=p>&lt;</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;friend info&#34;</span><span class=p>&gt;</span>&#34;{{ .Get &#34;word&#34; }}&#34;<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
		<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
	  <span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
	<span class=p>&lt;/</span><span class=nt>a</span><span class=p>&gt;</span>
{{ end }}
</code></pre></td></tr></table></div></div><h3 id=添加样式文件并引入>添加样式文件并引入</h3><p>在站点根目录下新增一个文件：<code>/assets/css/_partial/_single/_friend.scss</code>，内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>  1
</span><span class=lnt>  2
</span><span class=lnt>  3
</span><span class=lnt>  4
</span><span class=lnt>  5
</span><span class=lnt>  6
</span><span class=lnt>  7
</span><span class=lnt>  8
</span><span class=lnt>  9
</span><span class=lnt> 10
</span><span class=lnt> 11
</span><span class=lnt> 12
</span><span class=lnt> 13
</span><span class=lnt> 14
</span><span class=lnt> 15
</span><span class=lnt> 16
</span><span class=lnt> 17
</span><span class=lnt> 18
</span><span class=lnt> 19
</span><span class=lnt> 20
</span><span class=lnt> 21
</span><span class=lnt> 22
</span><span class=lnt> 23
</span><span class=lnt> 24
</span><span class=lnt> 25
</span><span class=lnt> 26
</span><span class=lnt> 27
</span><span class=lnt> 28
</span><span class=lnt> 29
</span><span class=lnt> 30
</span><span class=lnt> 31
</span><span class=lnt> 32
</span><span class=lnt> 33
</span><span class=lnt> 34
</span><span class=lnt> 35
</span><span class=lnt> 36
</span><span class=lnt> 37
</span><span class=lnt> 38
</span><span class=lnt> 39
</span><span class=lnt> 40
</span><span class=lnt> 41
</span><span class=lnt> 42
</span><span class=lnt> 43
</span><span class=lnt> 44
</span><span class=lnt> 45
</span><span class=lnt> 46
</span><span class=lnt> 47
</span><span class=lnt> 48
</span><span class=lnt> 49
</span><span class=lnt> 50
</span><span class=lnt> 51
</span><span class=lnt> 52
</span><span class=lnt> 53
</span><span class=lnt> 54
</span><span class=lnt> 55
</span><span class=lnt> 56
</span><span class=lnt> 57
</span><span class=lnt> 58
</span><span class=lnt> 59
</span><span class=lnt> 60
</span><span class=lnt> 61
</span><span class=lnt> 62
</span><span class=lnt> 63
</span><span class=lnt> 64
</span><span class=lnt> 65
</span><span class=lnt> 66
</span><span class=lnt> 67
</span><span class=lnt> 68
</span><span class=lnt> 69
</span><span class=lnt> 70
</span><span class=lnt> 71
</span><span class=lnt> 72
</span><span class=lnt> 73
</span><span class=lnt> 74
</span><span class=lnt> 75
</span><span class=lnt> 76
</span><span class=lnt> 77
</span><span class=lnt> 78
</span><span class=lnt> 79
</span><span class=lnt> 80
</span><span class=lnt> 81
</span><span class=lnt> 82
</span><span class=lnt> 83
</span><span class=lnt> 84
</span><span class=lnt> 85
</span><span class=lnt> 86
</span><span class=lnt> 87
</span><span class=lnt> 88
</span><span class=lnt> 89
</span><span class=lnt> 90
</span><span class=lnt> 91
</span><span class=lnt> 92
</span><span class=lnt> 93
</span><span class=lnt> 94
</span><span class=lnt> 95
</span><span class=lnt> 96
</span><span class=lnt> 97
</span><span class=lnt> 98
</span><span class=lnt> 99
</span><span class=lnt>100
</span><span class=lnt>101
</span><span class=lnt>102
</span><span class=lnt>103
</span><span class=lnt>104
</span><span class=lnt>105
</span><span class=lnt>106
</span><span class=lnt>107
</span><span class=lnt>108
</span><span class=lnt>109
</span><span class=lnt>110
</span><span class=lnt>111
</span><span class=lnt>112
</span><span class=lnt>113
</span><span class=lnt>114
</span><span class=lnt>115
</span><span class=lnt>116
</span><span class=lnt>117
</span><span class=lnt>118
</span><span class=lnt>119
</span><span class=lnt>120
</span><span class=lnt>121
</span><span class=lnt>122
</span><span class=lnt>123
</span><span class=lnt>124
</span><span class=lnt>125
</span><span class=lnt>126
</span><span class=lnt>127
</span><span class=lnt>128
</span><span class=lnt>129
</span><span class=lnt>130
</span><span class=lnt>131
</span><span class=lnt>132
</span><span class=lnt>133
</span><span class=lnt>134
</span><span class=lnt>135
</span><span class=lnt>136
</span><span class=lnt>137
</span><span class=lnt>138
</span><span class=lnt>139
</span><span class=lnt>140
</span><span class=lnt>141
</span><span class=lnt>142
</span><span class=lnt>143
</span><span class=lnt>144
</span><span class=lnt>145
</span><span class=lnt>146
</span><span class=lnt>147
</span><span class=lnt>148
</span><span class=lnt>149
</span><span class=lnt>150
</span><span class=lnt>151
</span><span class=lnt>152
</span><span class=lnt>153
</span><span class=lnt>154
</span><span class=lnt>155
</span><span class=lnt>156
</span><span class=lnt>157
</span><span class=lnt>158
</span><span class=lnt>159
</span><span class=lnt>160
</span><span class=lnt>161
</span><span class=lnt>162
</span><span class=lnt>163
</span><span class=lnt>164
</span><span class=lnt>165
</span><span class=lnt>166
</span><span class=lnt>167
</span><span class=lnt>168
</span><span class=lnt>169
</span><span class=lnt>170
</span><span class=lnt>171
</span><span class=lnt>172
</span><span class=lnt>173
</span><span class=lnt>174
</span><span class=lnt>175
</span><span class=lnt>176
</span><span class=lnt>177
</span><span class=lnt>178
</span><span class=lnt>179
</span><span class=lnt>180
</span><span class=lnt>181
</span><span class=lnt>182
</span><span class=lnt>183
</span><span class=lnt>184
</span><span class=lnt>185
</span><span class=lnt>186
</span><span class=lnt>187
</span><span class=lnt>188
</span><span class=lnt>189
</span><span class=lnt>190
</span><span class=lnt>191
</span><span class=lnt>192
</span><span class=lnt>193
</span><span class=lnt>194
</span><span class=lnt>195
</span><span class=lnt>196
</span><span class=lnt>197
</span><span class=lnt>198
</span><span class=lnt>199
</span><span class=lnt>200
</span><span class=lnt>201
</span><span class=lnt>202
</span><span class=lnt>203
</span><span class=lnt>204
</span><span class=lnt>205
</span><span class=lnt>206
</span><span class=lnt>207
</span><span class=lnt>208
</span><span class=lnt>209
</span><span class=lnt>210
</span><span class=lnt>211
</span><span class=lnt>212
</span><span class=lnt>213
</span><span class=lnt>214
</span><span class=lnt>215
</span><span class=lnt>216
</span><span class=lnt>217
</span><span class=lnt>218
</span><span class=lnt>219
</span><span class=lnt>220
</span><span class=lnt>221
</span><span class=lnt>222
</span><span class=lnt>223
</span><span class=lnt>224
</span><span class=lnt>225
</span><span class=lnt>226
</span><span class=lnt>227
</span><span class=lnt>228
</span><span class=lnt>229
</span><span class=lnt>230
</span><span class=lnt>231
</span><span class=lnt>232
</span><span class=lnt>233
</span><span class=lnt>234
</span><span class=lnt>235
</span><span class=lnt>236
</span><span class=lnt>237
</span><span class=lnt>238
</span><span class=lnt>239
</span><span class=lnt>240
</span><span class=lnt>241
</span><span class=lnt>242
</span><span class=lnt>243
</span><span class=lnt>244
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>url</span> <span class=p>{</span>
    <span class=k>text-decoration</span><span class=p>:</span> <span class=kc>none</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>color</span><span class=p>:</span> <span class=kc>black</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>logo</span> <span class=p>{</span>
    <span class=k>width</span><span class=p>:</span> <span class=mi>56</span><span class=kt>px</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>height</span><span class=p>:</span> <span class=mi>56</span><span class=kt>px</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>border-radius</span><span class=p>:</span> <span class=mi>50</span><span class=kt>%</span><span class=p>;</span>
    <span class=k>border</span><span class=p>:</span> <span class=mi>1</span><span class=kt>px</span> <span class=kc>solid</span> <span class=mh>#ddd</span><span class=p>;</span>
    <span class=k>padding</span><span class=p>:</span> <span class=mi>2</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>margin-top</span><span class=p>:</span> <span class=mi>14</span><span class=kt>px</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mi>14</span><span class=kt>px</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>background-color</span><span class=p>:</span> <span class=mh>#fff</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>whole</span> <span class=p>{</span>
    <span class=k>height</span><span class=p>:</span> <span class=mi>92</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>margin-top</span><span class=p>:</span> <span class=mi>8</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mi>4</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>width</span><span class=p>:</span> <span class=mi>31</span><span class=kt>%</span><span class=p>;</span>
    <span class=k>display</span><span class=p>:</span> <span class=kc>inline</span><span class=o>-</span><span class=kc>flex</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>border-radius</span><span class=p>:</span> <span class=mi>5</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>background</span><span class=p>:</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>14</span><span class=p>,</span> <span class=mi>220</span><span class=p>,</span> <span class=mi>220</span><span class=p>,</span> <span class=mf>0.15</span><span class=p>);</span>

    <span class=err>&amp;.shadow</span> <span class=err>{</span>
        <span class=k>margin-right</span><span class=p>:</span> <span class=mi>4</span><span class=kt>px</span><span class=p>;</span>
        <span class=k>box-shadow</span><span class=p>:</span> <span class=mi>4</span><span class=kt>px</span> <span class=mi>4</span><span class=kt>px</span> <span class=mi>2</span><span class=kt>px</span> <span class=mi>1</span><span class=kt>px</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span> <span class=mi>0</span><span class=p>,</span> <span class=mi>255</span><span class=p>,</span> <span class=mf>0.2</span><span class=p>);</span>
    <span class=p>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>borderFlash</span> <span class=p>{</span>
        <span class=k>border-width</span><span class=p>:</span> <span class=mf>3.5</span><span class=kt>px</span><span class=p>;</span>
        <span class=k>border-style</span><span class=p>:</span> <span class=kc>solid</span><span class=p>;</span>
        <span class=k>animation</span><span class=p>:</span> <span class=n>borderFlash</span> <span class=mi>2</span><span class=kt>s</span> <span class=kc>infinite</span> <span class=kc>alternate</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>led</span> <span class=p>{</span>
        <span class=k>animation</span><span class=p>:</span> <span class=n>led</span> <span class=mi>3</span><span class=kt>s</span> <span class=kc>infinite</span> <span class=kc>alternate</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>bln</span> <span class=p>{</span>
        <span class=k>animation</span><span class=p>:</span> <span class=n>bln</span> <span class=mi>3</span><span class=kt>s</span> <span class=kc>infinite</span> <span class=kc>alternate</span><span class=p>;</span>
    <span class=p>}</span>
<span class=err>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>whole</span> <span class=p>{</span>
    <span class=err>&amp;:hover</span> <span class=err>{</span>
        <span class=k>color</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
        <span class=err>&amp;</span> <span class=err>.friend.info</span> <span class=err>{</span>
            <span class=k>color</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
        <span class=p>}</span>
    <span class=err>}</span>

    <span class=o>&amp;</span><span class=p>.</span><span class=nc>default</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#215bb3</span><span class=n>bf</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>33</span><span class=p>,</span> <span class=mi>91</span><span class=p>,</span> <span class=mi>179</span><span class=p>,</span> <span class=mf>0.75</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>red</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#e72638</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>231</span><span class=p>,</span> <span class=mi>38</span><span class=p>,</span> <span class=mi>56</span><span class=p>,</span> <span class=mf>0.75</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>green</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#2ec58d</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>21</span><span class=p>,</span> <span class=mi>167</span><span class=p>,</span> <span class=mi>33</span><span class=p>,</span> <span class=mf>0.75</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>blue</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#2575fc</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>rgba</span><span class=p>(</span><span class=mi>37</span><span class=p>,</span> <span class=mi>117</span><span class=p>,</span> <span class=mi>252</span><span class=p>,</span> <span class=mf>0.75</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>linear-red</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#e72638</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>linear-gradient</span><span class=p>(</span><span class=kc>to</span> <span class=kc>right</span><span class=p>,</span> <span class=mh>#f9cdcd</span> <span class=mi>0</span><span class=p>,</span> <span class=mh>#e72638</span> <span class=mi>35</span><span class=kt>%</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>linear-green</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#2ec58d</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>linear-gradient</span><span class=p>(</span><span class=kc>to</span> <span class=kc>right</span><span class=p>,</span> <span class=mh>#1d7544</span> <span class=mi>0</span><span class=p>,</span> <span class=mh>#2ec58d</span> <span class=mi>35</span><span class=kt>%</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>linear-blue</span> <span class=p>{</span>
        <span class=nv>--primary-color</span><span class=p>:</span> <span class=mh>#2575fc</span><span class=p>;</span>
        <span class=err>&amp;:hover</span> <span class=err>{</span>
            <span class=k>background</span><span class=p>:</span> <span class=nb>linear-gradient</span><span class=p>(</span><span class=kc>to</span> <span class=kc>right</span><span class=p>,</span> <span class=mh>#6a11cb</span> <span class=mi>0</span><span class=p>,</span> <span class=mh>#2575fc</span> <span class=mi>35</span><span class=kt>%</span><span class=p>);</span>
        <span class=p>}</span>
    <span class=err>}</span>
<span class=err>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>whole</span> <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>left</span> <span class=nt>img</span> <span class=p>{</span>
    <span class=err>&amp;.auto_rotate_left</span> <span class=err>{</span>
        <span class=k>animation</span><span class=p>:</span> <span class=n>auto_rotate_left</span> <span class=mi>3</span><span class=kt>s</span> <span class=kc>linear</span> <span class=kc>infinite</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=o>&amp;</span><span class=p>.</span><span class=nc>auto_rotate_right</span> <span class=p>{</span>
        <span class=k>animation</span><span class=p>:</span> <span class=n>auto_rotate_right</span> <span class=mi>3</span><span class=kt>s</span> <span class=kc>linear</span> <span class=kc>infinite</span><span class=p>;</span>
    <span class=p>}</span>
<span class=err>}</span>
<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>whole</span><span class=p>:</span><span class=nd>hover</span> <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>left</span> <span class=nt>img</span> <span class=p>{</span>
    <span class=err>&amp;.rotate</span> <span class=err>{</span>
        <span class=k>transition</span><span class=p>:</span> <span class=mf>0.9</span><span class=kt>s</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-webkit-</span><span class=k>transition</span><span class=p>:</span> <span class=mf>0.9</span><span class=kt>s</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-moz-</span><span class=k>transition</span><span class=p>:</span> <span class=mf>0.9</span><span class=kt>s</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-o-</span><span class=k>transition</span><span class=p>:</span> <span class=mf>0.9</span><span class=kt>s</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-ms-</span><span class=k>transition</span><span class=p>:</span> <span class=mf>0.9</span><span class=kt>s</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>)</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>)</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-moz-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>)</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-o-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>)</span> <span class=cp>!important</span><span class=p>;</span>
        <span class=kp>-ms-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>)</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=p>}</span>
<span class=err>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>left</span> <span class=p>{</span>
    <span class=k>width</span><span class=p>:</span> <span class=mi>92</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>min-width</span><span class=p>:</span> <span class=mi>92</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>float</span><span class=p>:</span> <span class=kc>left</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>left</span> <span class=p>{</span>
    <span class=k>margin-right</span><span class=p>:</span> <span class=mi>2</span><span class=kt>px</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>right</span> <span class=p>{</span>
    <span class=k>margin-top</span><span class=p>:</span> <span class=mi>18</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>margin-right</span><span class=p>:</span> <span class=mi>18</span><span class=kt>px</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>name</span> <span class=p>{</span>
    <span class=k>overflow</span><span class=p>:</span> <span class=kc>hidden</span><span class=p>;</span>
    <span class=k>font-weight</span><span class=p>:</span> <span class=kc>bolder</span><span class=p>;</span>
    <span class=k>word-wrap</span><span class=p>:</span><span class=kc>break-word</span><span class=p>;</span>
    <span class=k>word-break</span><span class=p>:</span> <span class=n>break-all</span><span class=p>;</span>
    <span class=k>text-overflow</span><span class=p>:</span> <span class=kc>ellipsis</span><span class=p>;</span>
    <span class=k>display</span><span class=p>:</span> <span class=kp>-webkit-</span><span class=n>box</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=n>line-clamp</span><span class=p>:</span> <span class=mi>1</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=n>box-orient</span><span class=p>:</span> <span class=kc>vertical</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>info</span> <span class=p>{</span>
    <span class=k>margin-top</span><span class=p>:</span> <span class=mi>3</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>overflow</span><span class=p>:</span> <span class=kc>hidden</span><span class=p>;</span>
    <span class=k>word-wrap</span><span class=p>:</span><span class=kc>break-word</span><span class=p>;</span>
    <span class=k>word-break</span><span class=p>:</span> <span class=n>break-all</span><span class=p>;</span>
    <span class=k>text-overflow</span><span class=p>:</span> <span class=kc>ellipsis</span><span class=p>;</span>
    <span class=k>display</span><span class=p>:</span> <span class=kp>-webkit-</span><span class=n>box</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=n>line-clamp</span><span class=p>:</span> <span class=mi>2</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=n>box-orient</span><span class=p>:</span> <span class=kc>vertical</span><span class=p>;</span>
    <span class=k>line-height</span><span class=p>:</span> <span class=kc>normal</span><span class=p>;</span>
    <span class=k>font-size</span><span class=p>:</span> <span class=mf>0.8</span><span class=kt>rem</span><span class=p>;</span>
    <span class=k>color</span><span class=p>:</span> <span class=mh>#7a7a7a</span><span class=p>;</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>media</span> <span class=nt>screen</span> <span class=nt>and</span> <span class=o>(</span><span class=nt>max-width</span><span class=o>:</span> <span class=nt>900px</span><span class=o>)</span> <span class=p>{</span>
    <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>info</span> <span class=p>{</span>
        <span class=k>display</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>whole</span> <span class=p>{</span>
        <span class=k>width</span><span class=p>:</span> <span class=mi>45</span><span class=kt>%</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>left</span> <span class=p>{</span>
        <span class=k>width</span><span class=p>:</span> <span class=mi>84</span><span class=kt>px</span><span class=p>;</span>
        <span class=k>margin-left</span><span class=p>:</span> <span class=mi>15</span><span class=kt>px</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>block</span><span class=p>.</span><span class=nc>right</span> <span class=p>{</span>
        <span class=k>height</span><span class=p>:</span> <span class=mi>100</span><span class=kt>%</span><span class=p>;</span>
        <span class=k>margin</span><span class=p>:</span> <span class=kc>auto</span><span class=p>;</span>
        <span class=k>display</span><span class=p>:</span> <span class=kc>flex</span><span class=p>;</span>
        <span class=k>align-items</span><span class=p>:</span> <span class=kc>center</span><span class=p>;</span>
        <span class=k>justify-content</span><span class=p>:</span> <span class=kc>center</span><span class=p>;</span>
    <span class=p>}</span>
    <span class=p>.</span><span class=nc>friend</span><span class=p>.</span><span class=nc>name</span> <span class=p>{</span>
        <span class=k>font-size</span><span class=p>:</span> <span class=mi>14</span><span class=kt>px</span><span class=p>;</span>
    <span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>bln</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>5</span><span class=kt>px</span> <span class=kc>grey</span><span class=p>,</span><span class=kc>inset</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>5</span><span class=kt>px</span> <span class=kc>grey</span><span class=p>,</span><span class=mi>0</span> <span class=mi>1</span><span class=kt>px</span> <span class=mi>0</span> <span class=kc>grey</span><span class=p>;</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>5</span><span class=kt>px</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>),</span><span class=kc>inset</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>5</span><span class=kt>px</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>),</span><span class=mi>0</span> <span class=mi>1</span><span class=kt>px</span> <span class=mi>0</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>)</span>
	<span class=p>}</span>

	<span class=nt>to</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>16</span><span class=kt>px</span> <span class=kc>grey</span><span class=p>,</span><span class=kc>inset</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>8</span><span class=kt>px</span> <span class=kc>grey</span><span class=p>,</span><span class=mi>0</span> <span class=mi>1</span><span class=kt>px</span> <span class=mi>0</span> <span class=kc>grey</span><span class=p>;</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>16</span><span class=kt>px</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>),</span><span class=kc>inset</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>8</span><span class=kt>px</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>),</span><span class=mi>0</span> <span class=mi>1</span><span class=kt>px</span> <span class=mi>0</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>)</span>
	<span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>led</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>4</span><span class=kt>px</span> <span class=mh>#ca00ff</span>
	<span class=p>}</span>

	<span class=nt>25</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>16</span><span class=kt>px</span> <span class=mh>#00b5e5</span>
	<span class=p>}</span>

	<span class=nt>50</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>4</span><span class=kt>px</span> <span class=mh>#00f</span>
	<span class=p>}</span>

	<span class=nt>75</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>16</span><span class=kt>px</span> <span class=mh>#b1da21</span>
	<span class=p>}</span>

	<span class=nt>to</span> <span class=p>{</span>
		<span class=k>box-shadow</span><span class=p>:</span> <span class=mi>0</span> <span class=mi>0</span> <span class=mi>4</span><span class=kt>px</span> <span class=kc>red</span>
	<span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>borderFlash</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>border-color</span><span class=p>:</span> <span class=kc>white</span><span class=p>;</span>
	<span class=p>}</span>

	<span class=nt>to</span> <span class=p>{</span>
		<span class=k>border-color</span><span class=p>:</span> <span class=kc>grey</span><span class=p>;</span>
		<span class=k>border-color</span><span class=p>:</span> <span class=nf>var</span><span class=p>(</span><span class=o>--</span><span class=n>primary</span><span class=o>-</span><span class=kc>color</span><span class=p>,</span><span class=kc>grey</span><span class=p>)</span>
	<span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>auto_rotate_left</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
	<span class=p>}</span>

	<span class=nt>to</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>-1</span><span class=kt>turn</span><span class=p>)</span>
	<span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>auto_rotate_right</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
	<span class=p>}</span>

	<span class=nt>to</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>1</span><span class=kt>turn</span><span class=p>)</span>
	<span class=p>}</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><p>请注意，该文件是<code>.scss</code>文件，只有你使用的是扩展版本的Hugo时才能生效。</p><p>然后把<code>\themes\LoveIt\assets\css\_page\_single.scss</code>这个文件拷贝到<code>\assets\css\_page\_single.scss</code>，然后修改我们新增的<code>_single.scss</code>，在第一行加一行新代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=p>@</span><span class=k>import</span> <span class=s2>&#34;../_partial/_single/friend&#34;</span><span class=p>;</span>
</code></pre></td></tr></table></div></div><p>这样Hugo就会用我们新增的这个文件来渲染友链页面了。</p><h3 id=另一种添加样式文件并引入的方案>另一种添加样式文件并引入的方案</h3><p>感谢<code>@kirito</code>的建议，原友链样式的方案会侵入原本的主题样式，并且也不是所有页面都需要这个友链样式，所以可以采用另一种方案来选择性地引入友链样式：即同样使用shortcode来引入。</p><p>首先创建一个<code>/assets/css/friend.scss</code>文件，内容跟上文的<code>_friend.scss</code>文件一样。然后新增一个<code>/layouts/shortcodes/friend-css.html</code>文件：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html>{{ $options := (dict &#34;targetPath&#34; &#34;/css/friend.css&#34; &#34;outputStyle&#34; &#34;compressed&#34; &#34;enableSourceMap&#34; true) }}
{{ $style := resources.Get &#34;css/friend.scss&#34; | resources.ToCSS $options }}

<span class=p>&lt;</span><span class=nt>link</span> <span class=na>rel</span><span class=o>=</span><span class=s>&#34;stylesheet&#34;</span> <span class=na>href</span><span class=o>=</span><span class=s>&#34;{{ $style.RelPermalink }}&#34;</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>在需要使用友链的页面、文章中添加如下shortcode来引入友链样式即可：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{&lt; friend-css &gt;}}
</code></pre></td></tr></table></div></div><h3 id=在菜单栏里新增一个友链按钮>在菜单栏里新增一个友链按钮</h3><p>打开站点配置文件<code>config.toml</code>，添加友链按钮：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback># 菜单配置
[menu]
  [[menu.main]]
    pre = &#34;&lt;i class=&#39;fas fa-fw fa-fan fa-spin&#39;&gt;&lt;/i&gt;&#34;
    name = &#34;友链&#34;
    identifier = &#34;friends&#34;
    url = &#34;/friends/&#34;
    weight = 6
</code></pre></td></tr></table></div></div><h3 id=使用示例和效果展示>使用示例和效果展示</h3><p>在你想要引入友链的文章里使用下面的代码即可自动渲染成对应的友链：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{&lt; friend
name=&#34;雨临Lewis的博客&#34;
url=&#34;lewky.cn&#34;
logo=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/avatar.jpg&#34;
word=&#34;不想当写手的码农不是好咸鱼_(xз」∠)_&#34;
&gt;}}
</code></pre></td></tr></table></div></div><p>上面代码里的四个属性为必填项，还可以额外指定三个不同的属性来选择友链内置的多种样式，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span><span class=lnt>6
</span><span class=lnt>7
</span><span class=lnt>8
</span><span class=lnt>9
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>//边框及鼠标悬停的背景颜色，允许设置渐变色
//支持7种：default、red、green、blue、linear-red、linear-green、linear-blue
primary-color=&#34;default&#34;

//头像动画：rotate(鼠标悬停时旋转，此为默认效果)、auto_rotate_left(左旋转)、auto_rotate_right(右旋转)
img-animation=&#34;rotate&#34;

//边框动画：shadow(阴影，此为默认效果)、borderFlash(边框闪现)、led(跑马灯)、bln(主颜色呼吸灯)
border-animation=&#34;shadow&#34;
</code></pre></td></tr></table></div></div><link rel=stylesheet href=/css/friend.css><a target=_blank href=lewky.cn title=雨临Lewis的博客---不想当写手的码农不是好咸鱼_(xз」∠)_ class="friend url"><div class="friend block whole linear-green led"><div class="friend block left"><img class="friend logo auto_rotate_right" src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/avatar.jpg onerror="this.src='https:\/\/sdn.geekzu.org\/avatar\/d41d8cd98f00b204e9800998ecf8427e?d=retro'"></div><div class="friend block right"><div class="friend name">雨临Lewis的博客</div><div class="friend info">"不想当写手的码农不是好咸鱼_(xз」∠)_"</div></div></div></a><a target=_blank href=lewky.cn title=雨临Lewis的博客---不想当写手的码农不是好咸鱼_(xз」∠)_ class="friend url"><div class="friend block whole red borderFlash"><div class="friend block left"><img class="friend logo auto_rotate_left" src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/avatar.jpg onerror="this.src='https:\/\/sdn.geekzu.org\/avatar\/d41d8cd98f00b204e9800998ecf8427e?d=retro'"></div><div class="friend block right"><div class="friend name">雨临Lewis的博客</div><div class="friend info">"不想当写手的码农不是好咸鱼_(xз」∠)_"</div></div></div></a><a target=_blank href=lewky.cn title=雨临Lewis的博客---不想当写手的码农不是好咸鱼_(xз」∠)_ class="friend url"><div class="friend block whole default shadow"><div class="friend block left"><img class="friend logo rotate" src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/avatar.jpg onerror="this.src='https:\/\/sdn.geekzu.org\/avatar\/d41d8cd98f00b204e9800998ecf8427e?d=retro'"></div><div class="friend block right"><div class="friend name">雨临Lewis的博客</div><div class="friend info">"不想当写手的码农不是好咸鱼_(xз」∠)_"</div></div></div></a><p>如果友链的头像无法正常显示，会以一个默认的Gravatar头像显示。此外，在移动端会隐藏站点描述，只显示头像和站点名称，你可以通过将当前窗口缩小到宽度最小即可看到效果。</p><h2 id=参考链接>参考链接</h2><ul><li><a href=https://sr-c.github.io/2020/07/21/Hugo-custom/ target=_blank rel="noopener noreffer">自定义Hugo主题样式</a></li><li><a href=https://github.com/kaushalmodi/hugo-search-fuse-js target=_blank rel="noopener noreffer">kaushalmodi / hugo-search-fuse-js</a></li><li><a href=https://blog.233so.com/2020/04/friend-link-shortcodes-for-hugo-loveit/ target=_blank rel="noopener noreffer">Hugo 篇四：添加友链卡片 shortcodes</a></li><li><a href=https://www.cnblogs.com/wxcbg/p/7459022.html target=_blank rel="noopener noreffer">img标签设置默认图片</a></li><li><a href=https://blog.csdn.net/weixin_46382477/article/details/108144964 target=_blank rel="noopener noreffer">Fuse.js模糊搜索引擎</a></li><li><a href=https://www.jianshu.com/p/d0c8c3de8233 target=_blank rel="noopener noreffer">使用fuse.js进行搜索</a></li></ul><div class="details admonition note open"><div class="details-summary admonition-title"><i class="icon fas fa-pencil-alt fa-fwnote"></i>注意<i class="details-icon fas fa-angle-right fa-fw"></i></div><div class=details-content><div class=admonition-content>本文最后更新于 <span class=timeago datetime=2021-11-29T13:11:16 title="November 29, 2021">November 29, 2021</span>，文中内容可能已过时，请谨慎使用。</div></div></div><div class=post-reward><input type=checkbox name=reward id=reward hidden>
<label class=reward-button for=reward>赞赏支持</label><div class=qr-code><label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/wechat.png>
<span>微信打赏</span></label>
<label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/alipay.png>
<span>支付宝打赏</span></label></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span>更新于 2021-11-29</span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a class=link-to-markdown href=/posts/hugo-3.html/index.md target=_blank>阅读原始文档</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 Twitter" data-sharer=twitter data-url=https://lewky.cn/posts/hugo-3.html/ data-title="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章" data-hashtags=Hugo,LoveIt主题,主题美化,功能增强><i class="fab fa-twitter fa-fw"></i></a><a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://lewky.cn/posts/hugo-3.html/ data-hashtag=Hugo><i class="fab fa-facebook-square fa-fw"></i></a><a href=javascript:void(0); title="分享到 Hacker News" data-sharer=hackernews data-url=https://lewky.cn/posts/hugo-3.html/ data-title="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章"><i class="fab fa-hacker-news fa-fw"></i></a><a href=javascript:void(0); title="分享到 Line" data-sharer=line data-url=https://lewky.cn/posts/hugo-3.html/ data-title="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章"><i data-svg-src=https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg></i></a><a href=javascript:void(0); title="分享到 微博" data-sharer=weibo data-url=https://lewky.cn/posts/hugo-3.html/ data-title="Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章"><i class="fab fa-weibo fa-fw"></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fas fa-tags fa-fw"></i>&nbsp;<a href=/tags/hugo/>Hugo</a>,&nbsp;<a href=/tags/loveit%E4%B8%BB%E9%A2%98/>LoveIt主题</a>,&nbsp;<a href=/tags/%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/>主题美化</a>,&nbsp;<a href=/tags/%E5%8A%9F%E8%83%BD%E5%A2%9E%E5%BC%BA/>功能增强</a></section><section><span><a href=javascript:void(0); onclick=window.history.back();>返回</a></span>&nbsp;|&nbsp;<span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/hugo-2.html/ class=prev rel=prev title="Hugo系列(2) - 通过配置文件来定制个人站点"><i class="fas fa-angle-left fa-fw"></i>Hugo系列(2) - 通过配置文件来定制个人站点</a>
<a href=/posts/hugo-4.html/ class=next rel=next title="Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录">Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录<i class="fas fa-angle-right fa-fw"></i></a></div></div><div id=comments><div id=waline></div><script src=https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js></script><script>new Waline({el:'#waline',meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",placeholder:"为防恶意灌水攻击，评论前需注册并登录，望见谅~",serverURL:"https://comment.lewky.cn/",avatarCDN:"https://sdn.geekzu.org/avatar/",pageSize:20,avatar:"retro",lang:"zh-CN",visitor:true,highlight:true,uploadImage:false,emoji:['https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/嘉然今天吃什么','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/大航海嘉然','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/向晚大魔王','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/贝拉kira','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/珈乐Carol','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/乃琳Queen','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/EveOneCat','https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/滑稽','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/default']});</script></div></article></div></main><footer class=footer><div class=footer-container><div class=footer-line><span id=run-time></span>|
<a href=http://rssblog.vercel.app/ target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i>&nbsp;RSSBlog</a></div><div class=footer-line><i class="far fa-copyright fa-fw"></i><span itemprop=copyrightYear>2018 - 2022</span><span class=author itemprop=copyrightHolder>&nbsp;<a href=/ target=_blank>雨临Lewis</a></span>&nbsp;|&nbsp;<span class=license><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span><span class=icp-splitter>&nbsp;|&nbsp;</span><br class=icp-br><span class=icp><a target=_blank href=http://www.beian.miit.gov.cn/ style=font-weight:700>粤ICP备19103822</a></span></div></div></footer></div><div id=fixed-buttons><a href=# id=back-to-top class=fixed-button title=回到顶部><i class="fas fa-arrow-up fa-fw"></i></a><a href=# id=view-comments class=fixed-button title=查看评论><i class="fas fa-comment fa-fw"></i></a></div><div class=sidebar_wo><div id=leimu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuA.png'" title=回到顶部></div><div class=sidebar_wo id=lamu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuA.png'" title=回到底部></div></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/css/lightgallery.min.css><script type=text/javascript src=https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-zoom.js@1.2.0/dist/lg-zoom.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js></script><script type=text/javascript>window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":30},"comment":{},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true}};</script><script type=text/javascript src=/js/theme.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js></script><script>var $cdnPrefix="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master";</script><script type=text/javascript src=/js/custom.js></script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?6f278ed0fdb01edb3b1e7398379e5432";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></body></html>